<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>看你有多色</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<style type="text/css">
			#welcome .hdw{
				margin-top: 3rem;
				animation: hdw 2s infinite;
			}
			#welcome .hdw a{
				color: white;
			}
			@-webkit-keyframes hdw{
				0%{opacity: 0;}
				50%{opacity: 1;}
				100%{opacity: 0;}
			}
		</style>
	</head>
	<body>
		<!--欢迎页面-->
		<div id="welcome">
			<h1>看你有多色</h1>
			<p>找出颜色不同的一个</p>
			<div id="btnWrap">
				<button onclick="start()">开始游戏</button>
			</div>
			<p class="hdw"><a href="http://www.houdunwang.com">后盾网人人做后盾</a></p>
		</div>
		<!--游戏界面-->
		<div id="content">
			<!--分数和时间-->
			<div id="scorewrap">分数：<span id="score">0</span></div>
			<p id="time"></p>	
			<!--canvas图像处理-->
			<canvas id="box">
				
			</canvas>
		</div>
		<!--结束页面-->
		<div id="over">
			<h1 id="userLevel">L1你是瞎子</h1>
			<div class="buttonWrap">
				<button onclick="start()">重新游戏</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var color = function(){
			//原生对象
			this.hdEle = document.getElementById('box');
			//画布对象
			this.hdCtx = this.hdEle.getContext('2d');
			//浏览器的宽度高度
			this.innerW = window.innerWidth;
			this.innerH = window.innerHeight;
			//容器的宽高
			this.hdEleW = this.innerW;
			this.hdEleH = this.innerW;
			//获得边框宽度
			this.borderW = document.getElementById("box").clientLeft;
			//存色块的数组
			this.hdRectArr = [];
			//正确色块的坐标
			this.rightXY;
			//每一个色块的宽高
			this.everyW;
			//设置默认时间
			this.time = 25;
			//初始分数
			this.score = 0;
			//默认间隔
			this.jiange = 10;
			//初始等级
			this.level = 1;
			//最高等级
			this.maxLevel = 8;
			
			var hdThis = this;
			/**
			 * 1.初始化设置
			 */
			this.hdInit = function(){
				//1.设置欢迎页面的高度
				document.getElementById('welcome').style.height = this.innerH + "px";
				//2.设置结束页面的高度
				document.getElementById('over').style.height = this.innerH + "px";
				//3.设置画的高度
				this.hdEle.height = this.hdEleW - this.borderW *2;
				this.hdEle.width = this.hdEleW - this.borderW*2;
			}
			/**
			 * 2.执行程序
			 */
			this.hdRun = function(){
				//开始游戏
				this.hdStart();
				//填充色块
				this.hdCreateRect();
			}
			/**
			 * 4.填充色块
			 */
			this.hdCreateRect = function(){
				this.hdCtx.clearRect(0,0,this.hdEleW,this.hdEleW)
				//获得除了边框的元素宽度
				var w = this.hdEle.clientWidth;
				//间隔--
				if(this.level<hdThis.maxLevel){
					this.jiange--;
				}
				//计算每个色块的宽高
				var leftW = w - this.jiange * this.level;
				this.everyW = leftW/(this.level+1);
				//随机颜色
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				//存色块的数组清空
				this.hdRectArr = [];
				//设置填充颜色
				this.hdCtx.fillStyle = 'rgb('+r+','+g+','+b+')';
				for(var i=0;i<(this.level+1)*(this.level+1);i++){
					//画实心矩形
					this.hdCtx.fillRect((i%(this.level+1))*(this.everyW+this.jiange),Math.floor(i/(this.level+1))*(this.everyW+this.jiange),this.everyW,this.everyW);
					this.hdRectArr[this.hdRectArr.length] = {
						x:(i%(this.level+1))*(this.everyW+this.jiange),
						y:Math.floor(i/(this.level+1))*(this.everyW+this.jiange),
					}
				}
				//随机获取一个坐标
				this.rightXY = Math.floor(Math.random() * this.hdRectArr.length);
				console.log(this.hdRectArr);
				//将这个坐标的色块颜色稍作改变
				r += 15;
				g += 15;
				b += 15;
				//先把原来的擦出
				//this.hdCtx.clearRect(this.hdRectArr[this.rightXY].x,this.hdRectArr[this.rightXY].y,this.hdEleW,this.hdEleW);
				this.hdCtx.fillStyle = 'rgb('+r+','+g+','+b+')';
				this.hdCtx.fillRect(this.hdRectArr[this.rightXY].x,this.hdRectArr[this.rightXY].y,this.everyW,this.everyW);
				//检测用户点击
				this.hdCheck();
			}
			/**
			 * 5.检测用户点击
			 */
			this.hdCheck = function(){
				this.hdEle.onclick = function(e){
					//获取鼠标点击坐标
					var e = e||window.event;
					var X = e.offsetX||e.layerX;
					var Y = e.offsetY||e.layerY;
					//判断如果点击正确
					//正确小色块的起始坐标
					var rightBeginX = hdThis.hdRectArr[hdThis.rightXY].x;
					var rightBeginY = hdThis.hdRectArr[hdThis.rightXY].y;
					//正确小色块的结束坐标
					var rightEndX = rightBeginX + hdThis.everyW;
					var rightEndY = rightBeginY + hdThis.everyW;
					//判断如果点击小色块是正确的
					if(X>rightBeginX && X<rightEndX && Y>rightBeginY && Y<rightEndY){
						if(hdThis.level<hdThis.maxLevel){
							hdThis.level++;
						}
						//重新创建
						hdThis.hdCreateRect();
						//分数+1
						hdThis.score++;
						document.getElementById('score').innerHTML = hdThis.score;
					}

				}
			}
			/**
			 * 3.开始游戏
			 */
			this.hdStart = function(){
				
				//欢迎页面，结束页面消失
				document.getElementById('welcome').style.display = "none";
				document.getElementById('over').style.display = "none";
				//获得显示用户等级的元素
				var userLevel = document.getElementById('userLevel');
				//设置初始时间
				var timeEle = document.getElementById('time');
				timeEle.innerHTML = this.time;
				//设置定时器
				var time = this.time;
				var timer = setInterval(function(){
					//判断，如果时间归零
					if(time==0){
						switch (true){
							case hdThis.score<10:
								userLevel.innerHTML = 'L1你是瞎子';
								break;
							case hdThis.score<20:
								userLevel.innerHTML = 'L2猫的眼神';
								break;
							case hdThis.score<30:
								userLevel.innerHTML = 'L3猎鹰的眼睛';
								break;
							case hdThis.score<40:
								userLevel.innerHTML = 'L4上帝视角';
								break;		
							default:
								userLevel.innerHTML = 'L999，你别玩了太厉害了';
								break;
						}
						//显示结束界面
						document.getElementById('over').style.display = "block";
						clearInterval(timer);
						return;
					}
					time--;
					timeEle.innerHTML = time;
				},1000)
			}
		}
		var obj = new color;
		//进行初始化
		obj.hdInit()
		//点击开始按钮执行函数
		function start(){
			//分数归零
			obj.score = 0;
			//等级恢复
			obj.level = 1;
			//间隔恢复
			obj.jiange = 10;
			obj.hdRun();
		}
	</script>
</html>
